<script setup lang="ts">
import { formRules } from "./utils/rule";
import { useRole } from "./utils/hook";

defineOptions({
  name: "SystemSite"
});

const {
  closePageTag,
  ruleFormRef,
  newFormInline,
  submitForm,
  fileList1,
  fileList2,
  beforeUpload1,
  beforeUpload2,
  beforeRemove1,
  beforeRemove2
} = useRole();
</script>

<template>
  <el-card class="m-4 box-card" shadow="never">
    <template #header>
      <div class="w-full flex justify-between">
        <div class="font-medium">网站配置</div>

        <div>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button type="danger" @click="closePageTag()"> 关闭 </el-button>
        </div>
      </div>
    </template>
    <div>
      <el-form
        ref="ruleFormRef"
        :model="newFormInline"
        :rules="formRules"
        label-width="200px"
      >
        <el-form-item label="系统名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入系统名称"
          />
        </el-form-item>
        <el-form-item label="后台地址" prop="site">
          <el-input
            v-model="newFormInline.site"
            clearable
            placeholder="请输入后台地址"
          />
        </el-form-item>
        <el-form-item label="前端地址" prop="api">
          <el-input
            v-model="newFormInline.api"
            clearable
            placeholder="请输入前端地址"
          />
        </el-form-item>
        <el-form-item label="学员操作说明" prop="logo">
          <el-upload
            action="upload"
            :before-upload="beforeUpload1"
            :before-remove="beforeRemove1"
            multiple
            :auto-upload="true"
            :file-list="fileList1"
            :limit="1"
          >
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="管理操作说明" prop="logo">
          <el-upload
            action="upload"
            :before-upload="beforeUpload2"
            :before-remove="beforeRemove2"
            multiple
            :auto-upload="true"
            :file-list="fileList2"
            :limit="1"
          >
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
